<template>
  <!-- 个性推荐 -->
  <div class="box">
    <!-- 轮播图 -->
    <div class="sllde">
      <el-carousel trigger="click" :interval="4000" type="card" height="185px">
        <el-carousel-item v-for="item in banners" :key="item.index">
          <img :src="item.imageUrl" />
          <div class="parent">
            <div class="zj">{{item.typeTitle}}</div>
          </div>
        </el-carousel-item>
      </el-carousel>
    </div>
    <!-- 推荐歌单 -->
    <div class="recommend">
      <h3 class="title">
        推荐歌单
      </h3>
      <div class="items">
        <div class="item" v-for="(item, index) in list" :key="index" @click="details(item.id)">
          <img :src="item.picUrl" @mouseenter="enter(index)" @mouseleave='leaver()'>
          <p class="p " v-show='activeindex ==index'><i class="el-icon-caret-right"></i></p>
          <p class="name">{{item.name |ellipsis}}</p>
        </div>
      </div>
    </div>
    <!-- 独家放送 -->
    <div class="pored">
      <h3 class="title">
        独家放送
      </h3>
      <div class="items">
        <div class="item" v-for="item in pored" :key="item.index" @click="toMv(item.id)">
          <img :src="item.picUrl">
          <p class="name">{{item.name}}</p>
        </div>
      </div>

    </div>
    <!-- 最新音乐 -->
    <div class="news">
      <h3 class="title">
        最新音乐
      </h3>
      <div class="items">
        <div class="item" v-for="(item, index) in songs" :key="index">
          <div class="img-wrap">
            <!-- 封面 -->
            <img :src="item.picUrl" alt="" />
          </div>
          <div class="song-wrap">
            <!-- 歌名 -->
            <div class="song-name">{{ item.name }}</div>
          </div>
        </div>
      </div>
    </div>
    <!-- 推荐MV -->
    <div class="mvs">
      <h3 class="title">推荐MV</h3>
      <div class="items">
        <div class="item" v-for="(item,index) in mvs.slice(0,3)" :key="index" @click="toMv(item.id)">
          <div class="img-wrap">
            <img :src="item.picUrl" alt="" />
            <p class="name">{{item.name}}</p>
            <p class="s10">{{item.artistName}}</p>
            <p class="num">{{item.playCount}}</p>
          </div>
        </div>

      </div>

    </div>
		
   
    <div class="d"></div>
  </div>

</template>
<script>
// 导入 axios
import { API } from "../../../common/constant";
import axios from "axios";
export default {
  name: "discovery",
  data() {
    return {
      // 轮播图
      banners: [],
      // 推荐歌单
      list: [],
      // 独家放送
      pored: [],
      // 最新音乐
      songs: [],
      // 推荐mv
      mvs: [],
      // 播放按钮
      activeindex: -1,
    };
  },
  created() {
    // console.log('created')
    // 轮播图接口
    axios({
      url: `${API}/banner`,
      method: "get",
    }).then((res) => {
      this.banners = res.data.banners;
    });

    // 推荐歌单
    axios({
      url: "https://autumnfish.cn/personalized",
      method: "get",
      params: {
        // 获取的数据量
        limit: 10,
      },
    }).then((res) => {
      // console.log(res);
      this.list = res.data.result;
    });
    // 独家放送
    axios({
      url: `${API}/personalized/privatecontent`,
      method: "get",
      params: {
        // 获取的数据量
        limit: 3,
      },
    }).then((res) => {
      // console.log(res)
      this.pored = res.data.result;
      // this.$router.push(`/video2?q=${id}`);
    });

    // 最新音乐

    axios({
      url: "/api/discovery/newAlbum",
      method: "get",
      params: {
        // 获取的数据量
        limit: 12,
      },
    }).then((res) => {
      // console.log(res)
      this.songs = res.data.albums;
    });
    // 最新mv
    axios({
      url: "https://autumnfish.cn/personalized/mv",
      method: "get",
    }).then((res) => {
      // console.log(res)
      this.mvs = res.data.result;
    });
  },
  // 过渡器
  filters: {
    ellipsis(value) {
      if (!value) return "";
      if (value.length > 9) {
        return value.slice(0, 9) + "...";
      }
      return value;
    },
  },
  // 方法
  methods: {
    enter(index) {
      this.activeindex = index;
      // this.isShow = true;
      // console.log(index);
    },
    leaver() {
      this.activeindex = -1;
      // this.isShow = false;
    },
    toMv(id) {
      this.$router.push(`/video2?q=${id}`);
    },
    details(id) {
      // console.log(this.list);
      this.$router.push(`/details?q=${id}`);
    },
  },
};
</script>
<style scoped>
/* 页面 */
.box {
  position: relative;
  top: 130px;
  left: 200px;
}
/* 轮播图 */
.sllde {
  width: 990px;
}
.el-carousel__item {
  border-radius: 15px;
}
.el-carousel__item h3 {
  color: #475669;
  font-size: 14px;
  opacity: 0.75;
  line-height: 200px;
  margin: 0;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}

.sllde img {
  width: 100%;
  position: relative;
  border-radius: 15px;
}
.sllde .parent {
  height: 23px;
  position: absolute;
  bottom: 0;
  right: 0;
  background-color: #fff;
  border-radius: 10px 0px 10px 0px;
}
.sllde .parent .zj {
  margin: 0 10px;
  color: #fff;
  text-align: center;
  line-height: 23px;
  font-size: 15px;
}
.sllde .parent:nth-child(2n + 1) {
  background-color: #cc4a4a;
}
/* 推荐歌单 */
.recommend .items {
  width: 990px;
  display: flex;
  flex-wrap: wrap;
}
.recommend .items > .item {
  position: relative;
  margin: 10px;
  list-style: none;
  width: 176px;
  border-radius: 10px;
}
.recommend .items .item img {
  width: 100%;
  cursor: pointer;
}
.name {
  cursor: pointer;
}
.p {
  position: absolute;
  top: 120px;
  left: 120px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background-color: white;
}
.el-icon-caret-right {
  text-align: center;
  line-height: 30px;
  color: red;
  font-size: 30px;
}
/* 独家放送*/
.pored .items {
  width: 990px;
  display: flex;
  flex-wrap: wrap;
}
.pored .items > .item {
  margin: 10px;
  list-style: none;
  width: 310px;
  cursor: pointer;
}
.pored .items .item img {
  width: 100%;
  cursor: pointer;
}
.s1 {
  font-size: 15px;
}
.black {
  color: gray;
}
a {
  text-decoration: none;
}
a:hover {
  color: #000;
}
.d {
  height: 200px;
}
/* 最新音乐 */
.news {
  margin-top: 20px;
}
.news .items {
  width: 990px;
  display: flex;
  flex-wrap: wrap;
}
.news .items > .item {
  display: flex;
  margin: 10px;
  list-style: none;
  width: 310px;
  height: 60px;
  border-radius: 10px;
}
.news .items .item img {
  border-radius: 10px;
  height: 100%;
  width: 60px;
}
/* 推荐mv */
.mvs {
  margin-top: 20px;
}
.mvs .items {
  width: 990px;
  display: flex;
  flex-wrap: wrap;
}
.mvs .items > .item {
  position: relative;
  margin: 10px;
  list-style: none;
  width: 310px;
  border-radius: 10px;
}
.mvs .items .item img {
  cursor: pointer;
  width: 100%;
}
.s10 {
  font-size: 10px;
}
.name {
  overflow: hidden;
  cursor: pointer;
}
.num {
  position: absolute;
  top: 10px;
  color: #fff;
}

/* 主播电台 */
/* 听听 */
/* 看看 */
</style>
